<template>
  <div class="top-nav">
    <div class="nav">
      <div class="nav-left">
        ~ 欢迎光临！
        <span v-if="userInfo!==null">{{userInfo.username}}</span>
      </div>
      <div class="nav-right">
        <ul>

          <li v-if="userInfo==null">
            <a href="#/login">登陆</a>
            <span>/</span>
          </li>
          <li v-else>
            <a href="javascript:;" @click="loginOut">退出</a>
          </li>
          <li v-if="userInfo==null"><a href="#/register">注册</a> <span>/</span></li>
          <li @click="toChat">客户服务<span>/</span></li>
          <li><a href="javascript:;" @click="myOrder" style="text-decoration: none;color: #666;">我的订单</a><span>/</span></li>
          <li class="userInfo" @mousemove="activeMove" @mouseleave="activeLeave" v-if="userInfo!==null">
            <div @click="toUser()"> 个人信息<i class="el-icon-caret-bottom"></i></div>
            <div class="userProfile">
              <div class="userHead">
                <!-- 用户头像 -->
                <div>
                  <el-avatar :size="50">
                    <img :src="userImg" alt="">
                  </el-avatar>
                </div>

                <div class="detail">
                  ~欢迎回来~{{userInfo.username}}
                </div>
              </div>
              <div class="userChoice">
                <div>
                  <span><a href="#/userDetail">基本信息</a></span>
                  <span><a href="#/userSecure">安全设置</a></span>
                  <span><a href="#/userOrder">我的订单</a></span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {

  data() {
    return {
      // 用户头像
      userImg: '',
      // 图片服务器地址
      imgBaseUrl: 'https://phone-shop.oss-cn-beijing.aliyuncs.com/',
      chatVisible:true
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  methods: {
    toUser() {
      this.$router.push('/userDetail')
    },
    toChat(){
      this.$router.push('/chat')

    },
    activeMove() {
      const activeli = document.getElementsByClassName('userProfile')
      activeli[0].style.opacity = '1'
      activeli[0].style.height = '90px'
      activeli[0].style.display = 'block'
    },
    activeLeave() {
      const activeli = document.getElementsByClassName('userProfile')
      activeli[0].style.opacity = '0'
      activeli[0].style.height = '0px'
      setTimeout(() => {
        activeli[0].style.display = 'none'
      }, 0);
    },

    // 获取用户信息
    async getUserInfo() {
      const { data: res } = await this.$http.get('/user/info')
      console.log('用户信息：', res)
      if (res.code == 200) {
        window.sessionStorage.setItem('userInfo', JSON.stringify(res.data))
        this.$store.commit('setUserInfo', res.data)
      }
    },
    // 退出登录，清空token
    loginOut() {
      this.$router.push('/index')
      window.sessionStorage.clear()
      setTimeout(() => {
        window.location.reload()

      }, 100)

    },
    // 跳转到订单页
    myOrder() {
      this.$router.push('/userOrder')
    }
  },
  created() {
    // 判断是否存在用户信息，无则使用接口获取
    if (window.sessionStorage.getItem('token')) {
      console.log('检查userInfo:', this.userInfo)
      if (this.userInfo) {
        console.log('user在vuex中存在')
        if (this.userInfo.headUrl) {
          this.userImg = 'https://phone-shop.oss-cn-beijing.aliyuncs.com/' + this.userInfo.headUrl
        }
      } else {
        console.log('user不在vuex中存在，重新调用接口获取userInfo')
        this.getUserInfo()
        // console.log(JSON.parse(window.sessionStorage.getItem('userInfo')).username)
        // console.log('user不在vuex中存在，尝试从sessionStroage中获取')
        if (window.sessionStorage.getItem('userInfo')) {
          var user = JSON.parse(window.sessionStorage.getItem('userInfo'))
          if (user.headUrl) {
            this.userImg = 'https://phone-shop.oss-cn-beijing.aliyuncs.com/' + user.headUrl
          }
        }
      }
    }
    // console.log('头像：', this.userImg)
  }
}
</script>

<style lang="less" scoped>
.top-nav {
  height: 30px;
  // position: relative;
  z-index: 10;
  background-color: #f5f5f5;
  color: #666;
  font-size: 12px;
}
.nav {
  width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
  line-height: 27px;
  display: flex;
  justify-content: space-between;
  .nav-left {
  }
  .nav-right {
    ul {
      list-style: none;
      li {
        float: left;
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        padding: 0 9px;
        span {
          color: #ccc;
          padding-left: 9px;
          font-weight: bold;
        }
        i {
          padding-left: 5px;
        }
      }
    }
  }
}

// 个人信息
.userInfo:hover {
  background-color: #fff;
  box-sizing: border-box;
  // border: 1px solid #eee;
  border-bottom: none;
}
.userInfo {
  position: relative;
  z-index: 11;

  .userProfile {
    // height: 0px;
    width: 220px;
    opacity: 0;
    background-color: #fff;
    // box-sizing: border-box;
    border: 1px solid #eee;
    border-top: none;
    position: absolute;
    right: 0;
    // transition: all 0.5s;
    cursor: pointer;
    .userHead {
      display: flex;
      align-items: center;
      padding: 2px 18px;
      // border:1px solid red;
      border-bottom: 1px solid #eee;
      .detail {
        width: 100%;
        padding-left: 20px;
        // border-bottom: 1px solid #ddd;
      }
      // 头像样式
      .el-avatar {
        border: 1px solid rgb(243, 219, 190);
        background-color: rgb(252, 251, 249);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        padding: 5px;
        position: relative;
        img {
          border-radius: 50%;
          width: 90%;
          height: 90%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: #fff;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
      }
    }
    .userChoice {
      padding-left: 15px;
    }
  }
}
</style>